<template>
    <a-modal :keyboard="false" :maskClosable="false" title="表扬工单" :open="visible" :width="600" :confirmLoading="loading" centered :footer="false" @cancel="handleCancel">
        <a-descriptions title="" :column="1" :labelStyle="{ color: '#aaa', fontSize: '12px', width: '80px', textAlign: 'right' }">
            <a-descriptions-item label="工单编号">{{ modelRef.orderNum || '' }}</a-descriptions-item>
            <a-descriptions-item label="所属项目">{{ modelRef.projectName || '' }}</a-descriptions-item>
            <!-- <a-descriptions-item label="工单来源">{{ propertyMap[modelRef.orderProperty] || '' }}</a-descriptions-item> -->
            <a-descriptions-item label="创建时间">{{ modelRef.orderTime || '' }}</a-descriptions-item>
            <a-descriptions-item label="联系人">{{ modelRef.contactPerson || '' }}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ modelRef.contactPersonPhone || '' }}</a-descriptions-item>
            <a-descriptions-item label="提报人">
                <span v-if="modelRef.orderProperty == 0">业主/ {{ modelRef.propertyOwner || '' }}</span>
                <span v-else>{{ modelRef.creatorName || '' }}</span>
            </a-descriptions-item>
            <!-- <a-descriptions-item label="工单分类">{{ subMap[modelRef.orderTypeSub] }}-{{ modelRef.orderClassifyName || '' }}</a-descriptions-item> -->
            <!-- <a-descriptions-item label="接单时间">{{ modelRef.taskingTime || '' }}</a-descriptions-item> -->
            <!-- <a-descriptions-item label="当前责任人">{{ modelRef.orderChargePerson || '' }}</a-descriptions-item> -->
            <a-descriptions-item label="工单内容">{{ modelRef.content || '' }}</a-descriptions-item>
            <a-descriptions-item label="问题照片">
                <a-image-preview-group>
                    <a-space>
                        <template v-for="(item, index) in modelRef.fileList" :key="index">
                            <audio controls :src="item.viewAddress" v-if="item.oldName.includes('.mp3') || item.oldName.includes('.m4a')"></audio>
                            <a-button v-else-if="item.oldName.includes('.mp4')" @click="previewVideo(item)">点击查看视频</a-button>
                            <a-image v-else :width="80" :height="80" :src="item.viewAddress" />
                        </template>
                    </a-space>
                </a-image-preview-group>
            </a-descriptions-item>
        </a-descriptions>
    </a-modal>
</template>

<script lang="ts">
    import type { PropType } from 'vue';
    import { defineComponent, reactive, ref, watchEffect, watch } from 'vue';
    import { cloneDeep, isEmpty } from 'lodash-es';
    import type { TreeProps } from 'ant-design-vue';
    import { getPraise } from '@/api/order/praise-list';
    import { options, statusMap, propertyMap, typeMap } from '../mine-list/common';

    const fieldNames: TreeProps['fieldNames'] = {
        children: 'children',
        title: 'name',
        key: 'code',
    };

    export default defineComponent({
        props: {
            visible: {
                type: Boolean,
                required: true,
            },
            model: {
                type: Object as PropType<any>,
                default: () => null,
            },
        },
        emits: ['cancel', 'success'],
        setup(props, { emit }) {
            const loading = ref(false);

            const modelRef = reactive<any>({});

            // 记录初始值
            const initValues = reactive({});
            watch(
                () => props.visible,
                () => {
                    Object.assign(initValues, cloneDeep(props.model));
                },
            );
            watchEffect(() => {
                if (props.visible) {
                    console.log(props.model);

                    if (props.model.id) {
                        getPraise(props.model.id).then(res => {
                            Object.assign(modelRef, res.data || {});
                        });
                    }
                }
            });

            const handleCancel = () => {
                emit('cancel');
                Object.keys(modelRef).forEach(key => {
                    delete modelRef[key];
                });
            };

            const previewVideo = ({ viewAddress }) => {
                window.open(viewAddress, '_blank');
            };

            return {
                loading,

                modelRef,

                handleCancel,

                initValues,
                fieldNames,
                options,
                statusMap,
                propertyMap,
                typeMap,
                previewVideo,
            };
        },
        components: {},
    });
</script>
